<template>
  <view class="container">
	  <!-- 左侧 -->
	  <view class="layout-left">
		  <view class="item-category" :class="{ active: index==curTab}" v-for="(item, index) in list" :key="index" @click="onChangeTab(index, item.category_id)">{{ item.name }}</view>
	  </view>
	  
	   <!-- 右侧 -->
	  <view class="layout-right">
		  <view class="item-goods" v-for="(item, index) in goodsList.data" :key="index" @click="onTargetDetail(item.goods_id)">
			<image class="goods-img" :src="item.goods_image"></image>
			<view class="goods-content">
				<view class="goods-name">{{ item.goods_name }}</view>
				<view>
					<text class="goods-price">￥{{ item.goods_price_min }}</text>
					<text class="goods-stock">库存：{{ item.stock_total }}</text>
				</view>
			</view>
		  </view>
		  
		  <empty v-if="!goodsList.data.length" :isLoading="isLoading" tips="亲，暂无数据" />
	  </view>
  </view>
</template>

<script>
  import { setCartTabBadge, getEmptyPaginateObj, getMoreListData } from '@/utils/app'
  import SettingKeyEnum from '@/common/enum/setting/Key'
  import SettingModel from '@/common/model/Setting'
  import * as CategoryApi from '@/api/category'
  import Search from '@/components/search'
  import Empty from '@/components/empty'
  import * as GoodsApi from '@/api/goods'

  const App = getApp()

  export default {
    components: {
      Search,
      Empty
    },
    data() {
      return {
        // 列表高度
        scrollHeight: 0,
        // 一级分类：指针
        curIndex: 0,
        // 内容区竖向滚动条位置
        scrollTop: 0,
        // 分类列表
        list: [],
        goodsList: getEmptyPaginateObj(),// 商品列表数据
		categoryId: 0,
        curTab: 0,// 当前标签索引
        // 分类模板设置
        templet: {},
        // 正在加载中
        isLoading: true
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
      const app = this
      // 设置分类列表高度
      app.setListHeight()
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      const app = this
	  this.curTab = 0
      // 获取页面数据
      app.getPageData()
      // 更新购物车角标
      setCartTabBadge()
    },

    methods: {

      /**
       * 获取页面数据
       */
      getPageData() {
        const app = this
        app.isLoading = true
        Promise.all([
            // 获取分类模板设置
            // 优化建议: 可以将此处的false改为true 启用缓存
            SettingModel.data(false),
            // 获取分类列表
            CategoryApi.list()
          ])
          .then(result => {
            // 初始化分类模板设置
            app.initTemplet(result[0])
            // 初始化分类列表数据
            app.initCategory(result[1])
			app.getGoodsList(1)
          })
          .finally(() => app.isLoading = false)
      },

      /**
       * 初始化分类模板设置
       * @param {Object} result
       */
      initTemplet(setting) {
        this.templet = setting[SettingKeyEnum.PAGE_CATEGORY_TEMPLATE.value]
      },

      /**
       * 初始化分类列表数据
       * @param {Object} result
       */
      initCategory(result) {
        const app = this
        const data = result.data
        app.list = data.list
		console.log(data)
		if(data.list.length > 0){
			app.categoryId = data.list[0]['category_id']
		}
      },

      /**
       * 设置分类列表高度
       */
      setListHeight() {
        const app = this
        uni.getSystemInfo({
          success(res) {
            app.scrollHeight = res.windowHeight - 47
          }
        })
      },

      // 一级分类：选中分类
      handleSelectNav(index) {
        const app = this
        app.curIndex = index
        app.scrollTop = 0
      },

      /**
       * 获取商品列表
       * @param {number} pageNo 页码
       */
      getGoodsList(pageNo = 1) {
        const app = this
        const param = {
          sortType: 'sales',
          sortPrice: 0,
          categoryId: app.categoryId || 0,
          // goodsName: app.options.search || '',
          page: pageNo
        }
        return new Promise((resolve, reject) => {
          GoodsApi.list(param)
            .then(result => {
              // 合并新数据
              const newList = result.data.list
              app.goodsList.data = getMoreListData(newList, app.goodsList, pageNo)
              resolve(newList)
            })
            .catch(reject)
        })
      },
	  	  
	  // 获取当前标签项的值
	  getTabValue() {
	    return this.tabs[this.curTab].value
	  },
	  
	  // 切换标签项
	  onChangeTab(index, category_id) {
	    const app = this
	    // 设置当前选中的标签
	    app.curTab = index
	    app.categoryId = category_id
	    // 刷新订单列表
	    app.getGoodsList(1)
	  },
	  
	  // 跳转商品详情页
	  onTargetDetail(goodsId) {
	    this.$navTo('pages/goods/detail', { goodsId })
	  },
	  
      // 跳转至商品列表页
      onTargetGoodsList(categoryId) {
        this.$navTo('pages/goods/list', { categoryId })
      }

    },

    /**
     * 设置分享内容
     */
    onShareAppMessage() {
      const app = this
      return {
        title: _this.templet.shareTitle,
        path: '/pages/category/index?' + app.$getShareUrlParams()
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      return {
        title: _this.templet.shareTitle,
        path: '/pages/category/index?' + app.$getShareUrlParams()
      }
    }

  }
</script>

<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .cate-content {
    background: #fff;
  }

  .cate-wrapper {
    padding: 0 20rpx 20rpx 20rpx;
    box-sizing: border-box;
  }

  /* 一级分类(大图) 10 */

  .cate_style__10 .cate-item {
    margin-bottom: 18rpx;
  }

  .cate_style__10 .cate-item:last-child {
    margin-bottom: 0;
  }

  .cate_style__10 .cate-item image {
    display: block;
    width: 100%;
    height: auto;
  }

  /* 一级分类(小图) 11 */

  .cate_style__11 .cate-item {
    float: left;
    padding: 25rpx;
    width: 33.3333%;
    text-align: center;
    box-sizing: border-box;
  }

  .cate_style__11 .cate-item image {
    /* height: 208.656rpx; */
    width: 100%;
    display: block;
  }

  .cate_style__11 .cate-item image {
    display: block;
    width: 100%;
    margin-bottom: 10rpx;
  }

  .cate_style__11 .cate-item text {
    display: block;
    color: #555;
  }

  /* 二级分类 20 */

  .cate-content {
    width: 100%;
  }

  .cate-left {
    flex-direction: column;
    display: flex;
    width: 200rpx;
    color: #444;
    height: 100%;
    background: #f8f8f8;
  }

  .cate-right {
    display: flex;
    flex-direction: column;
    width: 550rpx;
    height: 100%;
    overflow: hidden;
  }

  .cate-right-cont {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    padding-top: 26rpx;
  }

  .type-nav {
    position: relative;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    z-index: 10;
    display: block;
    font-size: 26rpx;
  }

  .type-nav.selected {
    background: #fff;
    color: #fa2209;
    border-right: none;
    font-size: 28rpx;
  }

  .cate-cont-box {
    margin-bottom: 30rpx;
    padding-bottom: 10rpx;
    background: #fff;
    overflow: hidden;
  }

  .cate-cont-box .cate-img {
    padding: 13rpx 10rpx 4rpx 10rpx;
  }

  .cate-cont-box .cate-img image {
    width: 100%;
    height: 150rpx;
    border-radius: 10rpx;
  }

  .cate-cont-box text {
    text-align: center;
    display: block;
    font-size: 26rpx;
    padding-bottom: 14rpx;
    color: #444;
    padding: 0 15rpx 30rpx 15rpx;
  }

  .cate-two-box {
    width: 100%;
    padding: 0 10px;
  }
  
  .layout-left{
  	  width: 30%;height: 90vh;display: inline-block;width: 30%;border-right: 1px solid #dfdfdf;vertical-align: top;
	  .item-category{
		  display: block;
		  padding: 30rpx 10rpx;
		  text-align: center;
	  }
	  .item-category.active{
		  color: #fd1717;
		  border-right: 6rpx solid #fd1717;
	  }
  }
  
  .layout-right{
	  display: inline-block;width: 70%;padding: 20rpx;
	  
	  .item-goods{
		  margin: 20rpx 0;
		  
		  .goods-img{
			  display: inline-block;
			  width: 150rpx !important;
			  height: 150rpx !important;
			  vertical-align: top;
			  padding: 10rpx;
		  }
		  
		  .goods-content{
			  display: inline-block;
			  width: 60%;
			  .goods-name{
				  margin: 24rpx 5rpx;
				  font-size: 28rpx;
				  font-weight: bold;
				  white-space: nowrap;
				  overflow: hidden;
				  text-overflow: ellipsis;
			  }
			  .goods-price{
				  color: red;
			  }
			  .goods-stock{
				  margin-left: 20rpx;
			  }
		  }
	  }
  }
  
</style>
